HTMX এ hx-on Attribute ব্যবহার করে নির্দিষ্ট ইভেন্টে JavaScript ফাংশন কল করা যায়। hx-on মূলত JavaScript ইভেন্ট হ্যান্ডলিং সহজ করতে HTMX এ অন্তর্ভুক্ত করা হয়েছে। এটি HTMX এর ইভেন্টে JavaScript এর সাথে ইন্টারঅ্যাক্ট করতে দেয় এবং এর মাধ্যমে সরাসরি HTML থেকে JavaScript ফাংশন ট্রিগার করা যায়।
নিচে hx-on Attribute এবং JavaScript ফাংশন কল করার কিছু উদাহরণ দেখানো হলো।
উদাহরণ ১: hx-on ব্যবহার করে Button ক্লিক ইভেন্টে JavaScript ফাংশন কল করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX hx-on Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<script>
// JavaScript ফাংশন যা কল হবে
function showAlert() {
alert("Button clicked!");
}
</script>
</head>
<body>
<h2>Click the button to trigger JavaScript function</h2>
<!-- hx-on ব্যবহার করে click ইভেন্টে JavaScript ফাংশন কল করা -->
<button hx-on="click: showAlert()">Click Me</button>
</body>
</html>
ব্যাখ্যা
hx-on="click: showAlert()": এখানেclickইভেন্টের জন্যhx-onAttribute ব্যবহার করা হয়েছে। ক্লিক করলেshowAlert()ফাংশনটি কল হবে।showAlert(): JavaScript ফাংশনটি একটি অ্যালার্ট দেখাবে।
উদাহরণ ২: hx-on ব্যবহার করে ফর্ম ইনপুটে JavaScript ফাংশন কল করা
ফর্ম ইনপুটে পরিবর্তন হলে (onchange ইভেন্ট) JavaScript ফাংশন কল করতে hx-on ব্যবহার করা যেতে পারে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX hx-on Form Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<script>
// ইনপুট মান প্রদর্শনের জন্য JavaScript ফাংশন
function displayValue(event) {
alert("Entered value: " + event.target.value);
}
</script>
</head>
<body>
<h2>Enter something in the input field</h2>
<!-- onchange ইভেন্টে JavaScript ফাংশন কল করা -->
<input type="text" hx-on="change: displayValue(event)" placeholder="Type something...">
</body>
</html>
ব্যাখ্যা
hx-on="change: displayValue(event)": এখানেchangeইভেন্টের জন্যhx-onAttribute ব্যবহার করা হয়েছে। ইনপুটের মান পরিবর্তন হলেdisplayValue(event)ফাংশনটি কল হবে।displayValue(event): JavaScript ফাংশনটিevent.target.valueএর মাধ্যমে ইনপুটের মান নিয়ে অ্যালার্ট দেখাবে।
উদাহরণ ৩: hx-on ব্যবহার করে মাউস ওভার ইভেন্টে JavaScript ফাংশন কল করা
মাউস ওভার (mouseover) ইভেন্টে JavaScript ফাংশন কল করেও কিছু ইন্টারঅ্যাকটিভ ইফেক্ট তৈরি করা সম্ভব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX hx-on Mouseover Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<script>
// Background color পরিবর্তনের জন্য ফাংশন
function changeBackgroundColor(event) {
event.target.style.backgroundColor = "lightblue";
}
function resetBackgroundColor(event) {
event.target.style.backgroundColor = "";
}
</script>
</head>
<body>
<h2>Hover over the box</h2>
<!-- Mouseover এবং mouseout ইভেন্টে JavaScript ফাংশন কল করা -->
<div
hx-on="mouseover: changeBackgroundColor(event); mouseout: resetBackgroundColor(event)"
style="width: 200px; height: 100px; border: 1px solid #ddd; text-align: center; padding-top: 40px;">
Hover over me
</div>
</body>
</html>
ব্যাখ্যা
hx-on="mouseover: changeBackgroundColor(event); mouseout: resetBackgroundColor(event)":mouseoverইভেন্টেchangeBackgroundColorএবংmouseoutইভেন্টেresetBackgroundColorফাংশন কল করা হয়েছে।changeBackgroundColor(event):mouseoverইভেন্টে বক্সের ব্যাকগ্রাউন্ড কালার পরিবর্তন করে।resetBackgroundColor(event):mouseoutইভেন্টে ব্যাকগ্রাউন্ড কালার পূর্বের অবস্থায় ফিরিয়ে আনে।
উদাহরণ ৪: hx-on এবং HTMX এর AJAX রিকোয়েস্টের সমন্বয়
JavaScript ফাংশনের সাথে HTMX এর AJAX রিকোয়েস্ট এর ব্যবহার একটি উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX hx-on with AJAX Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<script>
// ডেটা লোড করার সময় একটি মেসেজ দেখানোর ফাংশন
function showLoadingMessage() {
document.getElementById("loading-message").style.display = "block";
}
function hideLoadingMessage() {
document.getElementById("loading-message").style.display = "none";
}
</script>
</head>
<body>
<h2>Load Data with AJAX and Show Loading Message</h2>
<!-- ক্লিক করলে showLoadingMessage() ফাংশন কল হবে, এবং AJAX রিকোয়েস্ট চালু হবে -->
<button
hx-get="/fetch-data"
hx-target="#content"
hx-swap="innerHTML"
hx-on="htmx:send: showLoadingMessage(); htmx:afterSwap: hideLoadingMessage();">
Load Data
</button>
<div id="loading-message" style="display: none; color: red;">Loading data...</div>
<div id="content">Data will be displayed here...</div>
</body>
</html>
ব্যাখ্যা
hx-on="htmx:send: showLoadingMessage(); htmx:afterSwap: hideLoadingMessage();":htmx:sendইভেন্টেshowLoadingMessage()ফাংশন এবংhtmx:afterSwapইভেন্টেhideLoadingMessage()ফাংশন কল করা হয়েছে।showLoadingMessage(): AJAX কল শুরু হলে এটি লোডিং মেসেজ প্রদর্শন করে।hideLoadingMessage(): AJAX রেসপন্স এসে HTML এ যোগ করার পর লোডিং মেসেজ লুকিয়ে রাখে।
hx-on Attribute ব্যবহার করে HTMX এবং JavaScript এর সমন্বয়
- Event Handling সহজ:
hx-onAttribute দিয়ে HTMX এর বিভিন্ন ইভেন্টে JavaScript ফাংশন কল করা যায়, যা ইন্টারঅ্যাকশন সহজ করে। - Multiple Events: একই Attribute এ একাধিক ইভেন্ট সংযুক্ত করা যায়, যা JavaScript এর মাধ্যমে ইন্টারফেস আরও ইন্টারঅ্যাকটিভ করে তোলে।
- Enhanced User Experience: Loading indicators, animations, এবং অন্যান্য UI feedback যোগ করে ব্যবহারকারীর অভিজ্ঞতা উন্নত করা যায়।
উপসংহার
hx-on Attribute HTMX এবং JavaScript একসাথে ব্যবহার করে ইন্টারঅ্যাকটিভ এবং রেসপন্সিভ ইন্টারফেস তৈরি করা সহজ করে তোলে। এটি সরাসরি HTML থেকে JavaScript ফাংশন কল করার সুযোগ দেয় এবং একাধিক ইভেন্ট পরিচালনা করে HTMX এর AJAX রিকোয়েস্ট এবং UI ইন্টারঅ্যাকশন উন্নত করে।
Content added By
Read more
